<!-- 示例核心代码(3/3) -->
<template>
    <el-dialog class="ba-operate-dialog" v-model="baTable.table.extend!.showInfo" width="55%" >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">详情</div>
        </template>

        <el-scrollbar  class="ba-table-form-scrollbar"   v-loading="baTable.form.loading" >

            <div class="ba-Edit-form" >
                <div v-if="baTable.table.extend!.infoData">

                    <!--                <el-card style="margin: 10px" shadow="hover">-->
                    <!--                    <el-steps style="max-width: 100%;margin-bottom: 15px;margin-top: 30px;" :active="baTable.table.extend!.infoData.step_num" align-center  finish-status="success" >-->
                    <!--                        <el-step v-for="(item, index) in baTable.table.extend!.infoData.step_array" :title="item.title"  />-->
                    <!--                    </el-steps>-->

                    <!--                </el-card>-->

                    <el-card style="margin: 10px 10px 10px 10px">
                        <el-steps style="max-width: 100%;margin-bottom: 15px;margin-top: 30px;" :active="baTable.table.extend!.infoData.step_num" align-center  finish-status="success" >
                            <el-step v-for="(item, index) in baTable.table.extend!.infoData.step_array" :title="item.title"  />
                        </el-steps>
                    </el-card>


                    <el-card style="margin: 0px 10px 0px 10px">
                        <template #header>
                            <div class="card-header">
                                <span>订单信息</span>
                            </div>
                        </template>
                        <el-descriptions  :column="2">
                            <el-descriptions-item label="下单用户">{{baTable.table.extend!.infoData?.user?.nickname}} <span v-if="baTable.table.extend!.infoData?.user_id > 0">( ID:{{baTable.table.extend!.infoData?.user_id}} )</span></el-descriptions-item>
                            <el-descriptions-item label="订单编号">{{baTable.table.extend!.infoData.order_no}}</el-descriptions-item>
<!--                            <el-descriptions-item label="订单类型">{{baTable.table.extend!.infoData.order_type_text}}</el-descriptions-item>-->
                            <el-descriptions-item label="订单金额">{{baTable.table.extend!.infoData.order_money}}</el-descriptions-item>
                            <el-descriptions-item label="商品金额">{{baTable.table.extend!.infoData.goods_money}}</el-descriptions-item>
                            <el-descriptions-item label="运费">{{baTable.table.extend!.infoData.pay_freight_money}}</el-descriptions-item>
                            <el-descriptions-item label="支付金额">{{baTable.table.extend!.infoData.pay_price}}</el-descriptions-item>
                            <el-descriptions-item label="余额">{{baTable.table.extend!.infoData.balance}}</el-descriptions-item>
                            <el-descriptions-item label="微信">{{baTable.table.extend!.infoData.cash_money}}</el-descriptions-item>
                            <el-descriptions-item label="订单生成时间">{{baTable.table.extend!.infoData.create_time}}</el-descriptions-item>
                            <el-descriptions-item label="支付时间">{{baTable.table.extend!.infoData.pay_time}}</el-descriptions-item>
                            <el-descriptions-item label="发货时间">{{baTable.table.extend!.infoData.deliver_time}}</el-descriptions-item>
                            <el-descriptions-item label="收货时间">{{baTable.table.extend!.infoData.receive_time}}</el-descriptions-item>
                            <el-descriptions-item label="取消类型">{{baTable.table.extend!.infoData.cancel_type_text}}</el-descriptions-item>
                            <el-descriptions-item label="取消时间">{{baTable.table.extend!.infoData.cancel_time}}</el-descriptions-item>
                            <el-descriptions-item label="用户备注">{{baTable.table.extend!.infoData.user_remarks}}</el-descriptions-item>
                        </el-descriptions>
                    </el-card>

                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-card  style="margin: 10px 10px 10px 10px">
                                <template #header>
                                    <div class="card-header">
                                        <span>收货信息</span>
                                    </div>
                                </template>
                                <el-descriptions  :column="3">
                                    <el-descriptions-item label="收货人">{{baTable.table.extend!.infoData?.name}}</el-descriptions-item>
                                    <el-descriptions-item label="联系电话">{{baTable.table.extend!.infoData?.mobile}}</el-descriptions-item>
                                    <el-descriptions-item label="省市区">
                                        {{baTable.table.extend!.infoData?.province}} - {{baTable.table.extend!.infoData?.city}} - {{baTable.table.extend!.infoData?.area}} -{{baTable.table.extend!.infoData?.address}}
                                    </el-descriptions-item>
                                    <!--                                <el-descriptions-item label="详细地址">-->
                                    <!--                                      {{baTable.table.extend!.infoData?.address}}-->
                                    <!--                                </el-descriptions-item>-->

                                </el-descriptions>
                            </el-card>
                        </el-col>
                    </el-row>


                    <el-card style="margin: 0px 10px 10px 10px">
                        <template #header>
                            <div class="card-header">
                                <span>订单商品</span>
                            </div>
                        </template>

                        <el-table :data="baTable.table.extend!.infoData?.goods" border style="width: 98%">
                            <el-table-column prop="name" label="商品"  />
                            <el-table-column prop="sku_name" label="规格" width="100" />
                            <!--                    <el-table-column prop="price" label="原价" width="180" />-->
                            <el-table-column prop="price" label="实付价" width="100" />
                            <el-table-column prop="num" label="数量" width="100" />
                            <el-table-column prop="valid_num" label="有效数量" width="100" />
                            <el-table-column prop="total_price" label="小计" width="100" />
                            <!--                    <el-table-column prop="after_text" label="退款售后" width="100" />-->
                        </el-table>
                    </el-card>


                    <el-card  style="margin: 0px 10px 10px 10px">
                        <template #header>
                            <div class="card-header">
                                <span>快递信息</span>
                            </div>
                        </template>

                        <el-table v-if="baTable.table.extend!.infoData?.send_style == 1" :data="baTable.table.extend!.infoData?.express_data" border style="width: 100%;margin-bottom: 15px;">
                            <el-table-column prop="name" label="快递公司"  />
                            <el-table-column prop="no" label="快递单号" />

                        </el-table>
                    </el-card>


                </div>

            </div>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { timeFormat } from '/@/utils/common'
import type baTableClass from '/@/utils/baTable'

const baTable = inject('baTable') as baTableClass
</script>

<style scoped lang="scss">
:deep(.ba-markdown table) {
    margin-bottom: 0px !important;
}
.info-box {
    margin-top: 60px;
    div {
        width: 100%;
        text-align: center;
    }
    .mt-40 {
        margin-top: 40px;
    }
}
.titles{
    margin-top: 15px;
    display: flex;
    text-align: center;
    font-weight: 900;
    color: var(--el-text-color-regular);
    height: 35px;
    align-items: center;
    justify-content: center;
}
:deep(.ba-markdown table tr:hover){
    background-color: inherit ;
}
</style>
